//@ts-nocheck
import React, { useEffect, useState } from 'react'
import './index.less'

const BasicColumnChart = ({
  data,
  scaleNum = 6,
  pillarHeight,
  backgroundColor,
  showNumberOrPercent,
  leftNameDistance,
  showXAxisNum
}) => {
  const [listData, setListData] = useState([])
  const [scaleArray, setScaleArray] = useState([])

  useEffect(() => {
    if (scaleNum <= 0) {
      return
    }
    let maxValue = 0
    data?.forEach((dataItem) => {
      if (dataItem.value > maxValue) maxValue = dataItem.value
    })
    let fValue = maxValue % (5 * scaleNum)
    if (fValue !== 0) {
      maxValue = maxValue + (5 * scaleNum - fValue)
    }
    if (maxValue < 5 * scaleNum) maxValue = 5 * scaleNum

    setListData(
      data?.map((dataItem) => {
        return {
          ...dataItem,
          name: dataItem.name,
          percent: (dataItem.value / maxValue) * 100,
          value: dataItem.value,
        }
      })
    )

    const newArray = new Array()
    const maxScaleNum = maxValue / scaleNum
    for (let i = 0; i <= scaleNum; i += 1) {
      newArray.push(i * maxScaleNum)
    }
    setScaleArray(newArray)
  }, [data, scaleNum])

  return (
    <section className="basic-column-chart">
      <div className="chart-bar-y-axis">
        {listData?.map((item, index) => {
          return (
            <div className="chart-bar-y-axis-item" key={index}>
              <div
                className="chart-bar-y-axis-item-name"
                style={{
                  paddingRight: leftNameDistance,
                  color: `${item.isUserChecked ? '#8B98A9' : '#DCE0E6'}`
                }}
              >
                {item.name}
              </div>
              <div
                className="chart-bar-y-axis-item-percent"
                style={{
                  backgroundColor: `${backgroundColor}`
                }}
              >
                <div
                  className="chart-bar-y-axis-item-percent-item"
                  style={{ width: `${item.percent}%`, height: pillarHeight }}
                >
                  <div
                    className="chart-bar-y-axis-item-bg"
                  />
                  <div className="num">
                    { item.value > 0 ? showNumberOrPercent ? item.value : `${Math.ceil(item.percent)}%` : null }
                  </div>
                </div>
              </div>
            </div>
          )
        })}
      </div>
      <div className="bar-x-axis">
        <ul className="chart-bar-x-axis">
          {scaleArray?.map((item, itemIndex) => {
            return (
              <li
                className="chart-bar-x-axis-li"
                style={{ left: `${(100 / scaleNum) * itemIndex}%` }}
                key={itemIndex}
              >
                {showXAxisNum && <span>{item}</span>}
              </li>
            )
          })}
        </ul>
      </div>
    </section>
  )
}

export default BasicColumnChart
